<template>
	<div style='height: 86vh;'>
	  <HeaderNav :title="$t('m.headernav.FRIENDCIRCLE')" :showBack="false" />
	  <div>
		  <div class="textarea">
			  <van-field
					v-model="message_content"
					:placeholder="$t('m.msg.MSG33')"
					type="textarea"
					maxlength="500"
				/>
			  <van-uploader 
			    accept="video/*,image/*,audio/*"
				:before-delete="beforeDelete" 
				:before-read="beforeRead" 
				v-model="imgPaths" 
				multiple 
				:max-count='9'
				style="margin-left: 30px;"/>
			  <!-- <img v-for="(item,index) in imgPaths" :key='index' :src='item' class="sendImg"/> -->
		  </div>
	   	 
		<div class="send_container">
			<div class="img_container">
				<i class=" img fa fa-smile-o" @click="showEmotion = !showEmotion"></i>
				<!-- <van-uploader :before-read="beforeRead">
					<i class=" img fa fa-photo"></i>
				</van-uploader> -->
				<!-- <van-icon name="chat" size="40px" color="" class="img" />
				<van-icon name="chat" size="40px" color="" class="img" /> -->
			</div>

			<div class="send_btn" @click="send">{{$t('m.msg.SEND_BTN')}}</div>
		</div>
		<div class="bottom"></div>
		<emotion v-show="showEmotion" @emotion="handleEmotion" :height="160" class="emotion"></emotion>
		<!-- 最新动态 -->
		<div class="friendCircle_container">
			<div class="friendCircle_title">{{$t('m.msg.NEW_ACTIVITY')}}</div>
			<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
			<van-list
			:offset='10'
			v-model="loading"
			:finished="finished"
			:finished-text="$t('m.msg.MSG6')"
			:error.sync="error"
			:error-text="$t('m.msg.MSG7')"
			@load="getFriendCircleList"
			>
			<div v-for="(item, index) in friendCircleList" :key="index">
			<div class="flex">
			<router-link class="friendCircle_headerImg" :to="`/userInfo?type=2&id=${item.member.id}`">
				<img :src="item.member.httpAvatar" class="friendCircle_headerImg"/>
			</router-link>
			<div>
				<div class="friendCircle_name">{{item.member.name}}</div>
				<div class="friendCircle_date">{{item.stepTime}}</div>
			</div>
			<div class="friendCircle_del" v-if='item.isOwn' @click="deleteItem(item.message.id)"  >{{$t('m.msg.DELETE_BTN')}}</div>
			</div>
			<div class="friendCircle_content" v-html="`${getEmotionHtml(item.message.content)}`"></div>
			<!-- 加载图片和视频 -->
			<div v-if="item.message.type == 'imageText'" class="flex">
			<img class="messageImg" @click='seeImg(path)' :src="path" v-for="(path, i) in item.message.resources" :key="i" />
			</div>
			<div v-if="item.message.type == 'videoText'">
			<video controls='true' width="300px"  height="100px" :ref="`video${item.message.id}`" :src="item.message.resources"></video>
			</div>
			<div class="friendCircle_bottom">
			<div class="friendCircle_bottom">
				<i class="fa fa-heart friendCircle_img" :style="`color: ${item.isZan ? 'red' : '#a1a1a1'}`" @click="likeMsg(index)" ></i>
				<div class="friendCircle_num">{{item.zanNumber}}</div>
			</div>
			<i class="fa fa-comments friendCircle_img" @click="changeComment(item.message.id)" ></i>
			</div>
			<div v-if="showComment.id == item.message.id && showComment.flag">
			<!-- 评论列表 -->
			<div class="comment_container" v-for="(item, index) in commentList" :key='index'>
				<div class="friendCircle_headerImg">
				<img :src="item.member.httpAvatar" class="friendCircle_headerImg"/>
				</div>
				<div class="flex">
				<div class="friendCircle_name comment_name">{{item.member.name}}</div>
				<div class="friendCircle_date">{{item.createDate}}</div>
				</div>
				<div class="comment_content" v-html="`${getEmotionHtml(item.content)}`"></div>
			</div>
			<!-- 消息框 -->
			<van-field
				v-model="message"
				:placeholder="$t('m.msg.MSG34')"
				type="textarea"
				maxlength="500"
				class="textarea"
			/>
			<div class="send_btn" @click="sendMsg(item.message.id)">{{$t('m.msg.SEND_BTN')}}</div>
			</div>
			<div>
			</div>
			</div>
			</van-list>
			</van-pull-refresh>
		</div>
	    <Footer :active="2" :chartFlag="chartFlag" />
	  </div>
	  <van-popup closeable v-model="dialogFlag">
        <!-- <img :src="img" class='popup_img'/> -->
		<div style='padding: 1vh 0;width:90vw;display:flex;align-items: center;justify-content: center;'>
            <img :src="img" style="width: 100%;max-height: 98vh;"/>
        </div>
      </van-popup>
	  
	</div>
</template>

<script>
  import { 
	Field,
	Icon,
	Uploader,
	List,
	PullRefresh,
	Popup 
  } from 'vant';
  import HeaderNav from '@/components/HeaderNav.vue'
  import Footer from '@/components/Footer.vue'
  import {getUser} from '@/api/session';
  import Emotion from '@/components/Emotion/index'
  import {postQuery, getQuery, uploadvideo, uploadImgs, getEmotionHtml} from '@/api/query';
  export default {
    name: 'friendCircle',
    data() {
      return {
		dialogFlag:false,
      	img: '',
		userInfo: {},
		message: "",
		showEmotion: false,
		imgs: [],//图片文件集合
		imgPaths: [], //图片展示集合
		friendCircleList:[],//动态列表
		pages: 0,
		page: 1,
		loading: false,
		error: false,
		finished: false,
		refreshing: false,
		showComment: {
			id: 0,
			flag: false
		},//显示评论id，状态
		message_content: '',
		message: '',//评论框的值
		commentList: [] //评论列表
      }
	},
	props: {
		chartFlag: Boolean
	},
    components: {
      [Field.name]: Field,
	  [Icon.name]: Icon,
	  [Uploader.name]: Uploader,
	  [List.name]: List,
	  [PullRefresh.name]: PullRefresh,
	  [Popup.name]: Popup,
      HeaderNav,
	  Footer,
	  Emotion
	},
	created(){
      let that = this;
    //   that.chartIds = that.$parent.$data.chartList
	  that.chartFlag = that.$parent.$data.chartFlag
	  that.userInfo = getUser();
    },
	methods:{
		seeImg(img){
			this.img = img
			this.dialogFlag = true
		},
		//调用获取表情方法
		getEmotionHtml(txt){
			return getEmotionHtml(txt);
		},
		beforeDelete(file){
			let that = this;
			let index = that.imgs.indexOf(file.file)
			if (index > -1) {
				that.imgs.splice(index, 1);
			}
			return true;
		},
		// 返回布尔值
		beforeRead(file) {
			let that = this;
			//验证视频   
			if(that.imgs.length > 0){
				//  本次上传是视频，并且上传过文件  return
				if(file.type.indexOf('video') != -1 
				|| file.type.indexOf('audio') != -1){
					if(that.imgs[0].type.indexOf('video') != -1 
					|| that.imgs[0].type.indexOf('audio') != -1){
						that.$toast.fail(that.$i18n.t('m.msg.MSG9'));
					}else{
						that.$toast.fail(that.$i18n.t('m.msg.MSG45'));
					}
					return false;
				}
				//  之前有文件  且是视频  return
				if(that.imgs[0].type.indexOf('video') != -1 
				|| that.imgs[0].type.indexOf('audio') != -1){
					if(file.type.indexOf('video') != -1 
					|| file.type.indexOf('audio') != -1){
						that.$toast.fail(that.$i18n.t('m.msg.MSG9'));
					}else{
						that.$toast.fail(that.$i18n.t('m.msg.MSG45'));
					}
					return false;
				}
			}
			if(file.size >= 3145728 && file.type.indexOf('image') != -1){
				that.$toast.fail(that.$i18n.t('m.msg.MSG2'));
				return false;
			}
			// var reader = new FileReader();　　　　//实例化
			// reader.readAsDataURL(file);　　　　　　//加载
			// reader.onload = function () {
			// 	that.imgPaths.push(this.result);       
			// }
			that.imgs.push(file);
			return true;
		},
		//发送消息
		send(){
			let that = this;
			if(!that.message_content){
				that.$toast.fail(that.$i18n.t('m.msg.MSG46'));
				return
			}
			let params = {};
			//消息
			params.content = that.message_content;
			params.resources = [];
			//消息类型：text-》纯文本消息，imageText-》图文，videoText-》视频
			if(that.imgs.length > 0){
				
				//判断视频
				let file = that.imgs[0];
				if(file.type.indexOf('video') != -1 
				|| file.type.indexOf('audio') != -1){
					params.type = 'videoText';
					//上传视频
					uploadvideo(file)
					.then (res => {
						console.log(res)
						if(res.code == 200){
							//添加文件
							params.resources.push(res.data.path);
							that.addMessage(params);
						}else{
							that.$toast.fail(res.msg);
							return;
						}
					}).catch(function (error) {
						return;
					});
				}else{
					params.type = 'imageText';
					uploadImgs(that.imgs)
					.then (res => {
						console.log(res)
						if(res.code == 200){
							for(let i = 0; i < res.data.length; i ++){
								//添加文件
								params.resources.push(res.data[i].path);
							}		
							that.addMessage(params);	
						}else{
							that.$toast.fail(res.msg);
							return;
						}
					}).catch(function (error) {
						return;
					});
					// let funcs = [];
					//上传图片
					// for(let i = 0; i < that.imgs.length; i ++){
					// 	funcs[i] = uploadImg(that.imgs[i])
					// 	.then (res => {
					// 		console.log(res)
					// 		if(res.code == 200){
					// 			//添加文件
					// 			params.resources.push(res.data.path);
					// 		}else{
					// 			that.$toast.fail(res.msg);
					// 			return;
					// 		}
					// 	}).catch(function (error) {
					// 		return;
					// 	});
					// }
					// Promise.all(funcs).then(res=>{
					// 	that.addMessage(params)
					// })
				}
			}else{
				params.type = 'text';
				that.addMessage(params)
			}
			
			
		},
		//提交朋友圈消息
		addMessage(params){
			let that = this;
			postQuery('/member/friendCircle/message/add', params)
				.then (res => {
				console.log(res)
				if(res.code == 200){
					that.$toast.success(that.$i18n.t('m.msg.MSG10'));
					//清空数据
					that.message_content = "";
					that.showEmotion = false;
					that.imgs = [];
					that.imgPaths = [];
					that.onRefresh();
				}else{
					that.$toast.fail(res.msg);
				}
			})
		},
		handleEmotion(i) {
			console.log(i)
			this.message_content += i;
		},
		onRefresh() {
			// 清空列表数据
			this.finished = false;
			//初始化
			this.pages = 0;
			this.friendCircleList = [];
			this.page = 1;
			// 重新加载数据
			// 将 loading 设置为 true，表示处于加载状态
			this.loading = true;
			this.getFriendCircleList();
		},
		//最新动态
		getFriendCircleList(){
			let that = this
			let url = '/member/friendCircle/message/list';
			let params = {
				pageNumber: that.page
				// isMi: !that.isMine
			}
			// if(!that.isMine){
			// 	url += '/'+that.id;
			// }
			if(that.pages > 0 && that.page > that.pages){
				that.finished = true;
			}
			getQuery(url, params)
				.then (res => {
				if(res.code == 200){
					console.log('最新动态: ',res);
					//如果数据不够finished
					if(res.data.records.length < 10){
					that.finished = true;
					}
					that.friendCircleList = that.friendCircleList.concat(res.data.records)
					// = res.data.records;
					that.pages = res.data.pages;
					that.page ++;
					that.loading = false;
					that.refreshing = false;
				}else{
					that.$toast.fail(res.msg);
					that.finished = true;
				}
			}).catch(function (error) {
				that.error = true;     
			});
		},
		//点赞
		likeMsg(index){
			let that = this;
			let id = that.friendCircleList[index].message.id
			getQuery('/member/friendCircle/fabulous/'+id)
				.then (res => {
				if(res.code == 200){
					console.log('点赞: ',res);
					//点赞数量
					let flag = that.friendCircleList[index].isZan;
					if(flag){
					that.friendCircleList[index].zanNumber --;
					}else{
					that.friendCircleList[index].zanNumber ++;
					}
					//点赞状态
					that.friendCircleList[index].isZan = !flag;
					
				}else{
					that.$toast.fail(res.msg);
				}
			})
		},
		changeComment(id){
			let that = this;
			//改变展示隐藏状态 
			//改变状态
			if(that.showComment.id == id){
				that.showComment.flag = !that.showComment.flag;
			}else{
				that.showComment.flag = true;
			}
			that.showComment.id = id;
			
			//显示评论时查询评论列表
			if(that.showComment.flag){
				that.getShowCommentList(id);
			}
		},
		//加载评论
		getShowCommentList(id){
			let that = this;
			getQuery('/member/friendCircle/comment/list/'+id)
			.then (res => {
			if(res.code == 200){
				console.log('评论列表: ',res);
				that.commentList = res.data;
			}else{
				that.$toast.fail(res.msg);
			}
			})
		},
		//发送评论
		sendMsg(id){
			let that = this;
			let params = {
				fcmid: id,
				content: that.message
			}
			postQuery('/member/friendCircle/comment', params)
				.then (res => {
				if(res.code == 200){
					console.log('发送评论: ',res);
					that.$toast.success(that.$i18n.t('m.msg.MSG35'))
					//重新渲染评论列表
					that.getShowCommentList(id);
					that.message = '';
				}else{
					that.$toast.fail(res.msg);
				}
			})
		},
		//删除评论
		deleteItem(id){
			let that = this;
			var flag = confirm(that.$i18n.t('m.msg.MSG36'));
			if(!flag){
				return;
			}
			postQuery('/member/friendCircle/message/delete/'+id)
				.then (res => {
				if(res.code == 200){
					that.$toast.success(that.$i18n.t('m.msg.MSG37'))
					//重新渲染评论列表
					that.onRefresh();
				}else{
					that.$toast.fail(res.msg);
				}
			})
		}
	}
  }
</script>
<style scoped>
 /* .textarea{
  	border-radius: 10px;
  	border: 2px #a1a1a1 solid;
  	margin: 30px 2%;
  	width: 96%;
	background-color: white;
  } */
  .img{
	  margin-left: 2vw;
	  font-size: 60px;
	  color: #a1a1a1;
  }
  .send_btn{
  	color: white;
  	height: 50px;
  	width: 80px;
  	background-color: #01D2FF;
  	border-radius: 5px;
  	font-size: 16px;
  	display: flex;
  	justify-content: center;
  	align-items: center;
  }
  
  .img_container{
  	display: flex;
  }

  .send_container{
  	height: 40px;
  	display: flex;
  	align-items: center;
  	width: 98%;
  	justify-content: space-between;
  }
  .sendImg{
	  height: 150px;
	  width: 120px;
	  margin: 0px 30px;
  }
  .emotion{
	  position: relative;
	  top: -2vh;
	  left: 2vw;
	  width: 80vw;
	  z-index: 100;
	  background-color: white;
	   /* margin-top: 20px;  */
  }
  .bottom{
  	width: 100%;
  	background-color: white;
  	height: 4vh;
	margin-top: 2vh;
  }
 
  .userinfo_header_image{
    height: 60vh;
    width: 100vw;
  }

  .userinfo_name{
    position: absolute;
    top: 60vh;
    left: 18vw;
    font-weight: 550;
    font-size: 30px;
  }

  .userinfo_img{
    position: absolute;
    top: 60vh;
    left: 2vw;
    width: 95px;
    height: 95px;
  }

  .userinfo_li_container{
    width: 100vw;
    display: flex;
    justify-content: space-around;
    
  }

  .userinfo_li_item{
    /* display: flex; */
    text-align: center;
    color: #a1a1a1;
  }

  .userinfo_li_img{
    font-size: 80px;
    /* width: 80px;
    height: 80px; */
    margin-top: 20px;
    margin-bottom: 5px;
  }

  .userinfo_tab_container{
    margin-top: 3vh;
    display: flex;
  }

  .userinfo_tab{
    width: 50vw;
    height: 7vh;
    line-height: 7vh;
    text-align: center;
    font-size: 30px;
    
  }

  .userinfo_tab_select{
    color: white;
    background-color: #01D2FF;
  }

  .userinfo_line_container{
    display: flex;
    flex-wrap:wrap;
    font-size: 32px;
    /* height: 100px; */
    line-height: 100px;
    padding: 0px 20px;
  }

  .userinfo_line_left{
    /* width: 50%; */
    color: #a1a1a1;
    width: 200px;
  }
  
  .userinfo_more{
  	margin-top: 20px;
  	margin-bottom: 40px;
  	height: 130px;
  	width: 100vw;
  	background-color: white;
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	font-size: 36px;
  }

  .flex{
    display: flex;
	flex-wrap: wrap;
  }
  .friendCircle_name{
    font-size: 26px;
    color: rgb(1,88,144);
    margin: 13px 30px;
  }

  .friendCircle_date{
    font-size: 26px;
    color: #a1a1a1;
    margin: 20px 30px;
  }

  .friendCircle_content{
    /* height: 60px; */
    width: 96vw;
    margin: 30px 3vw;
    font-size: 32px;
    color: #a1a1a1;
  }

  .friendCircle_bottom{
    display: flex;
  }
  .friendCircle_img{
    font-size: 60px;
    margin: 20px 0px 0px 40px;
    color: #a1a1a1;
  }

  .friendCircle_num{
    margin: 44px 20px;
  }

  .friendCircle_headerImg{
    width: 95px;
    height: 95px;
    border-radius: 50%;
    margin: 10px;
  }

  .comment_container{
    margin: 10px 20px;
  }

  .comment_name{
    margin: 20px 4px 0px 40px;
  }

  .comment_content{
    /* height: 60px; */
    width: 96vw;
    margin: 10px 5vw;
    font-size: 28px;
    color: #a1a1a1;
  }

  .textarea{
  	border-radius: 10px;
  	border: 2px #a1a1a1 solid;
  	margin: 30px 2%;
  	width: 96%;
  	/* height: 13vh; */
	  background-color: white;
  }

  .send_btn{
  	color: white;
  	height: 50px;
  	width: 80px;
  	background-color: #01D2FF;
  	border-radius: 5px;
  	font-size: 16px;
  	display: flex;
  	justify-content: center;
  	align-items: center;
    margin-left: 80vw;
  }

  .messageImg{
    height: 30vw;
    width: 30vw;
    object-fit: cover;
    margin: 10px 0px 10px 20px;
  }

  .friendCircle_del{
    margin: 20px 0px 0px 30vw;
    color: red;
  }

  .friendCircle_title{
	  font-size: 32px;
	  margin: 10px 20px;
	  /* color: red; */
  }

  .friendCircle_container{
	  position: relative;
	  top: 0;
	  z-index: 0;
	  margin-bottom: 7vh;
	  /* position: fixed;
	  top: 46vh;
	  left: 0; */
  }

  .popup_img{
    width: 80vw;
    /* height: 80vh; */
  }
</style>